@import url('_funs.less');
.pageIndex{
  .advance{
    display: block;
    width:100%;
    margin: 29px 0;
  }
  .content{
    ul.indexnav{
      overflow: hidden;
      border: 1px solid @line-color;
      margin-top: 20px;
      li{
        float: left;
        width: 25%;
        padding: 20px 0;
        a{
          display: block;
          color:#333;
          text-align: center;
          border-left: 1px solid @line-color;
          i{
            font-size: 50px;
          }
          div{
            font-size: 18px;
            font-weight: bold;
          }
        }
        &.active,&:hover{
          a{
            color:@basecolor;
          }
        }
        &:first-child{
          a{
            border:none;
          }
        }
      }
    }
    .title{
      font-weight: bold;
      font-size: 0;
      line-height: 30px;
      span{
        font-size: 18px;
      }
      i{
        font-size: 15px;
      }
    }
    .li0{
      margin-top: 60px;
      padding-bottom: 40px;
      .cf{
        overflow: hidden;
        .pull-left{
          width: 880px;
          .t{
            overflow: hidden;
            li{
              float: left;
              width: 293px;
              &.t-0{
                background: #9cb1ff;
                &:hover{
                  background: #8b9dde;
                }
              }
              &.t-1{
                background: #ffdd4f;
                &:hover{
                  background: #d8bc46;
                }
              }
              &.t-2{
                background: #80c269;
                &:hover{
                  background: #6a9e57;
                }
              }
              a{
                display: block;
                color:#fff;
                padding: 24px 0 24px 70px;
                .tTitle{
                  font-size: 18px;
                  line-height: 30px;
                }
                .desc{
                  line-height: 25px;
                }
              }
            }
          }
          .bi{
            overflow: hidden;
            li{
              float: left;
              width: 50%;
              padding-top: 21px;
              &:hover{
                .b{
                  .b-title{
                    font-weight: bold;
                  }
                  .desc{
                    color:#666;
                  }
                }
              }
              .img{
                float: left;
                width: 160px;
                height: 126px;
                overflow: hidden;
                img{
                  display: block;
                  width: 100%;
                }
              }
              .b{
                padding-left: 15px;
                float: right;
                width: 280px;
                .b-title{
                  padding: 15px 0 10px;
                  font-size: 16px;
                  color:#333;
                  .-text-ellipsis();
                }
                .desc{
                  color:#999;
                  .-text-line(3,22px);
                }
              }
            }
          }
        }
        .pull-right{
          width: 300px;
          .t{
            overflow: hidden;
            font-size: 17px;
            padding: 5px 0 7px;
            a{
              float: right;
              font-size: 12px;
              line-height: 20px;
              margin-top: 3px;
              color:#666;
              &:hover{
                color:#333;
              }
            }
          }
          .b{
            border: 1px solid @line-color;
            padding: 15px;
            &>img{
              display: block;
              width:100%;
            }
            ul{
              li{
                overflow: hidden;
                margin-top: 17px;
                .img{
                  float: left;
                  width: 99px;
                  height: 66px;
                  img{
                    display: block;
                    width:100%;
                    height: 100%;
                  }
                }
                .desc{
                  float: right;
                  width: 160px;
                  margin-top: -2px;
                  div{
                    .-text-line(2,19px);
                  }
                  a{
                    .-text-height(22px);
                    font-size: 12px;
                    color:#fff;
                    background: @basecolor;
                    padding: 0 15px;
                    margin-top: 10px;
                    display: inline-block;
                    &:hover{
                      background: @basecolor-dark;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .li1{
      margin-bottom: 15px;
      ul{
        padding: 10px 0;
        overflow: hidden;
        margin: 0 -10px;
        li{
          float: left;
          width: 12.5%;
          padding: 0 10px;
          cursor: pointer;
          a{display: block}
          &:hover{
            position: relative;
            &:before{
              content: '';
              position: absolute;
              left:10px;
              right:10px;
              top:0;
              bottom:0;
              background-image: url('../images/hover.png');
              background-position: center;
              background-size: contain;
              z-index: 99;
            }
          }
          img{
            display: block;
            width: 100%;
          }
        }
      }
    }
    .li2{
      margin-top: 20px;
      .cf{
        .-clearfix();
        .pull-left{
          width:160px;
          line-height: 70px;
          background: #efefef;
          color:#666;
          div{
            text-align: right;
            padding-right: 57px;
            position: relative;
            &::after{
              content: '';
              position: absolute;
              left:10px;
              right:10px;
              top:0;
              border-bottom:1px solid #fff;
            }
            &:first-child{
              &::after{
                border: none;
              }
            }
            &.active,&:hover{
              color:#fff;
              background: @basecolor;
              &::after{
                border:none;
              }
              &::before{
                content:'';
                position: absolute;
                left: 100%;
                top:50%;
                margin-top: -5px;
                border-top: 5px solid transparent;
                border-left: 10px solid @basecolor;
                border-bottom: 5px solid transparent;
              }
            }
          }
        }
        .pull-right{
          width: 1040px;
          height: 280px;
          border-top:1px solid @line-color;
          border-right: 1px solid @line-color;
          border-bottom:1px solid @line-color;
          overflow: hidden;
          padding: 8px 0 8px 20px;
          ul{
            overflow: hidden;
            height: 264px;
            .li{
              width: 33.333%;
              padding: 0 10px;
              float: left;
              .-text-height(33px);
              a{
                display: block;
                border-bottom: 1px dashed @line-color;
                color:#999;
                .-text-ellipsis();
                &:hover{
                  color:#666;
                }
              }
            }
          }
        }
      }
    }
    .assort{
      margin-bottom: 30px;
      .cf{
        overflow: hidden;
        .l-1{
          width: 200px;
          color:#fff;
          padding: 20px;
          &.color-0{
            background: #9cb1ff;
          }
          &.color-1{
            background: #ffdd4f;
          }
          &.color-2{
            background: #0cb46a;
          }
          .t{
            overflow: hidden;
            a{
              float: left;
              color:#fff;
              width: 50%;
              line-height:35px;
              padding: 0 10px;
              .-text-ellipsis();
            }
          }
          &>img{
            display: block;
            width: 100%;
            margin-top: 10px;
          }
        }
        ul{
          float: left;
          width: 733px;
          padding: 0 10px;
          li{
            float: left;
            width: 25%;
            padding: 0 10px;
            margin-bottom: 10px;
            a{
              display: block;
              color:#333;
              line-height: 22px;
              img{
                width: 100%;
              }
              div.name{
                padding-top: 5px;
                .-text-ellipsis();
              }
              div.price{
                font-weight: bold;
                .-text-ellipsis();
              }
            }
          }
        }
        .pull-right{
          float: right;
          width: 267px;
          height: 420px;
          position: relative;
          &>img{
            display: block;
            width: 100%;
            height:100%;
          }
          &>div{
            position: absolute;
            left:17px;
            bottom: 20px;
            right:17px;
            background: #fff;
            background: rgba(255,255,255,0.8);
            padding: 15px;
            .t{
              font-weight: bold;
              overflow: hidden;
              font-size: 16px;
              span{
                float: right;
                font-size: 12px;
                margin-top: 3px;
                i{
                  color:#ff7f2f;
                  font-style: normal;
                }
              }
            }
            .desc{
              color:#666;
              .-text-line(2,18px);
              margin:5px 0 10px;
              font-size: 12px;
            }
            .b{
              overflow: hidden;
              line-height: 40px;
              img{
                float: left;
                width: 40px;
                height:40px;
                border-radius: 50%;
                margin-right: 10px;
              }
            }
          }
        }
      }
    }
    .li3{
      margin-bottom: 20px;
      .cf{
        
        .name{
          position: absolute;
          z-index: 20;
          bottom: 0;
          width: 100%;
          left:0;
          height: 50px;
          line-height: 50px;
          background: #000;
          background: rgba(0,0,0,0.8);
          color:#fff;
          overflow: hidden;
          padding: 0 10px;
        }
        .pull-left{
          width:500px;
          height: 366px;
          overflow: hidden;
          position: relative;
          .swiper-slide{
            position: relative;
            .text{
              position: absolute;
              z-index: 20;
              bottom: 0;
              width: 100%;
              left:0;
              height: 50px;
              line-height: 50px;
              background: #000;
              background: rgba(0,0,0,0.8);
              color:#fff;
              overflow: hidden;
              padding: 0 10px;
            }
          }
          img{
            display: block;
            width:100%;
            height: 100%;
          }
          .pagination {
            position: absolute;
            left: 0;
            right:10px;
            bottom:15px;
            text-align: right;
            margin:0;
          }
          .swiper-pagination-switch {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            background: #555;
            margin: 0 5px;
            opacity: 0.8;
            border: 1px solid #fff;
            cursor: pointer;
          }
          .swiper-active-switch {
            background: #fff;
          }
        }
        .m{
          float: left;
          width: 378px;
          padding: 0 20px;
          .li{
            height: 170px;
            position: relative;
            margin-bottom: 26px;
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
        .pull-right{
          position: relative;
          width: 322px;
          height: 366px;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.li5{
  .jclist{
    position: relative;
    padding: 0 30px 0;
    .left,.right{
      position: absolute;
      top:0;
      line-height: 200px;
      color:#333;
      font-size: 40px;
      cursor: pointer;
    }.left{
      left:0;
    }
    .right{
      right: 0;
    }
  }
  .personlist{
    overflow: hidden;
    height: 250px;
    margin-top:10px;
    position: relative;
    
    .swiper-slide{
      &>div{
        width: 200px;
        height:200px;
        border-radius: 50%;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        &>img{
          display: block;
          width: 100%;
          height: 100%;
        }
        &>div{
          position: absolute;
          left: 0;
          right:0;
          bottom:0;
          background: rgba(0,0,0,0.7);
          color:#fff;
          padding-top: 10px;
          padding-bottom: 20px;
          text-align: center;
          .-text-ellipsis();
        }
      }
    }
  }
}